// DataImportDialog.js
import React, { useState } from 'react';
import "./DataImportDialog.css"; // 引入 CSS
const DataImportDialog = ({ isOpen, onClose }) => {
  const [formData, setFormData] = useState({
    index_library_name: '',
    table_name: '',
    geo_level: '',
    big_table_names: '',
    cover_data: '',
    flatten_2d: '',
    nlp: '',
    file_name: null
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleFileChange = (e) => {
    setFormData(prevState => ({
      ...prevState,
      file_name: e.target.files[0]
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = new FormData();
    Object.keys(formData).forEach(key => {
      data.append(key, formData[key]);
    });

    fetch('/satxspace-gdm2/data/datamanage/import/vectorshp', {
      method: 'POST',
      body: data
    })
      .then(response => response.json())
      .then(result => {
        console.log('Success:', result);
        onClose();
      })
      .catch(error => console.error('Error:', error));
  };

  return (
    isOpen && (
        <div className="dialog-container">
        <h2 className="dialog-header">导入 SHP 矢量数据</h2>
  
        <div className="form-group">
          <label>数据源:</label>
          <input type="text" name="dataSource" value={formData.dataSource} onChange={handleChange} />
        </div>
  
        <div className="form-group">
          <label>索引:</label>
          <input type="text" name="index" value={formData.index} onChange={handleChange} />
        </div>
  
        <div className="form-group">
          <label>网格层级:</label>
          <input type="text" name="gridLevel" value={formData.gridLevel} onChange={handleChange} />
        </div>
  
        <div className="form-group">
          <label>索引大表:</label>
          <input type="text" name="indexTable" value={formData.indexTable} onChange={handleChange} />
        </div>


        <div className="form-group">
          <label>索引大表:</label>
          <select name="cover_data" value={formData.cover_data} onChange={handleChange} required>
             <option value="">请选择</option>
             <option value="1">覆盖</option>
             <option value="0">新增</option>
        </select>
        </div>

        <div className="form-group">
          <label>二维入库:</label>
          <select name="flatten_2d" value={formData.flatten_2d} onChange={handleChange} required>
             <option value="">请选择</option>
             <option value="1">二维</option>
             <option value="0">三维</option>
          </select>
        </div>

        <div className="form-group">
          <label>自然语言入库:</label>
          <select name="nlp" value={formData.nlp} onChange={handleChange} required>
             <option value="">请选择</option>
             <option value="1">开启</option>
             <option value="0">关闭</option>
          </select>
        </div>

        <div className="form-group">
          <label>上传 SHP 文件:</label>
          <input type="file" name="shpFile" accept=".shp" onChange={handleFileChange} />
        </div>
  
        <div className="button-group">
          <button className="button-submit" onClick={handleSubmit}>提交</button>
          <button className="button-cancel" onClick={onClose}>取消</button>
        </div>
      </div>
    )
  );
};


export default DataImportDialog;
